import React, { Component } from 'react';
import { Timeline,Space,Empty } from 'antd';
import axios from './../../axios';
import { ClockCircleOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import iconList from './../../config/suffixIcon';
import './lately.less';

class Lately extends Component {

    state = {
        fileOperationDates:new Map(),
        pageIndex: 1,
        isPadding: false,
		hasData: false,//是否有没数据
    }

     componentDidMount(){
           this.addOperations()
    }

    addOperations= async ()=>{
        const res = await axios.ajax({
            url: "/log/fileOperation/list", 
            method: "post",
            data:{
				username:this.props.username,
                page:this.state.pageIndex,
                pageSize:40
            }
        })
        const result = res.result;
        if(result.data){
            this.convertOptions(result.data)
            this.setState({pageIndex:++this.state.pageIndex, hasData: true})
        }else{
            this.setState({isPadding:false})
        }
    }

    convertOptions =(operations)=> {
        const ops = this.state.fileOperationDates;
        operations.forEach(item=>{
            const time = this.converTime(item.create_time);
            if(ops.get(time.date)){
                ops.get(time.date).push({
                    data:item,
                    time:time.time
                })
            }else{
                ops.set(time.date,[{
                    data:item,
                    time:time.time
                }])
            }
        })
        this.setState({fileOperationDates:ops})
    }

    converTime =(time)=>{
        return {
            date:new Date(time*1000).toLocaleString().split(' ')[0],
            time:new Date(time*1000).toLocaleString().split(' ')[1],
            dateTime: new Date(time*1000).toLocaleString()
        }
    }
	
	
	shouldComponentUpdate(nextProps, nextState){
		if(nextProps.isBottom){
			    this.addOperations()
			    this.props.noBottom()
		}
		return true;
	}


    render() {
        const ops = this.state.fileOperationDates;
        if(this.props.isBottom){
            this.addOperations()
            this.props.noBottom()
        }
        return (
			<div style={{height: '100%'}}>
				{this.state.hasData?
					<div style={{width:'100%',padding:'20px',marginTop:'20px'}}>
					    <Timeline mode='left' pending={this.state.isPadding&&'加载中....'}>
					        {
					            Array.from(ops.keys()).map(
					                date=>
										ops.get(date).map((item,index)=>
										!index
										?<Timeline.Item 
											color={Color(item)}
											key={index}
											dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} 
											label={date}>
											<Data item={item}/>
										</Timeline.Item>
										:<Timeline.Item key={index}
											color={Color(item)}
											> 
											<Data item={item}/>
										</Timeline.Item>
										)
					            )
					        }
					    </Timeline>
					</div>
					:
					<div className="empty-page">
						<div>
								<Empty description='暂无数据'/>
						</div>
					</div>
				}
			</div>
            
        )
    }
}

const Color =({data})=>{
	switch (true){
		case data.category.includes('删除'):
			return 'red';
		case data.category.includes('保存'):
			return 'rgb(250,200,100)';
		case data.category.includes('恢复'):
			return 'green';
		default:
			return 'blue';
	}
}

const Data =({item})=>{
		let icon = item.data?.version.path
		if(icon.length>0){
			icon = icon.split('.').length > 1 ? icon.split('.')[1] : 'unix/directory';
		}else{
			icon = undefined
		}
		
		let time = new Date(item.data.create_time*1000);
		let xtime = time.getHours()+":"+time.getMinutes();
		
		return <Space size='large'>
			<span className="xtime-wrap">
				{xtime}
			</span>
			<span>
			<svg
				style={{fontSize: "24px"}}
				className="icon"
				aria-hidden="true">
				<use xlinkHref={iconList[icon]}></use>
			</svg> &nbsp;
			{item.data?.version.filename}
			</span>
			<span>
				{item.data.category}
			</span>
		</Space>
}

export default connect(
state=>({
	username:state.username,
    isBottom:state.isBottom
}),dispatch=>({
	noBottom(){
		dispatch({
			type:"IS_BOTTOM",
			isBottom:false
		})	
	},
}))(Lately) ;